{% extends 'CatalogCommonBundle::base.html.twig' %}

{% block breadcrumbs %}
    Выбрать регион, модель, модификацию / Выбрать комплектацию / Выбрать группу запчастей / Выбрать подгруппу запчастей / Выбрать схему / Выбрать запчасть
{% endblock breadcrumbs %}

{% block regionRuname %}{{ oContainer.getActiveRegion.getRuname }}{% endblock regionRuname %}
{% block modelRuname %}{{ oContainer.getActiveModel.getRuname }}{% endblock modelRuname %}
{% block modificationRuname %}{{ oContainer.getActiveModification.getRuname }}{% endblock modificationRuname %}
{% block complectationRuname %}{{ oContainer.getActiveComplectation.getRuname }}{% endblock complectationRuname %}
{% block groupRuname %}{{ oContainer.getActiveGroup.getRuname }}{% endblock groupRuname %}
{% block subGroupRuname %}{{ oContainer.getActiveGroup.getSubGroup(parameters.subGroupCode).getRuname }}{% endblock subGroupRuname %}

{% block body %}
    {% block head %}<h3>Выбрать запчасть:</h3>{% endblock head %}
    {% block schema %}
        <div class="row">
            <map name="{{ oContainer.getActiveSchema.getCode }}">
            <div class="col-lg-4">
                {% if oContainer.getActiveSchema.getPncs %}
                <h4>Семейства запчастей</h4>
                {% block pncs %}
                    {% for pnc in oContainer.getActiveSchema.getPncs %}
                        {% block pnc %}
                            <div class="pnc glyphicon-plus small" id="pnc_{{ pnc.getCode }}">
                                ({{ pnc.getCode }}) {{ pnc.getRuname }}</a>
                            </div>
                            {% block pncScript %}
                                <script>
                                    $("#pnc_{{ pnc.getCode }}").on("click", function(){
                                        {% block pncClick %}
                                        $("#articul_for_pnc{{ pnc.getCode }}").toggleClass("hidden");
                                        $("#pnc_{{ pnc.getCode }}").toggleClass("glyphicon-plus");
                                        $("#articul_for_pnc{{ pnc.getCode }}").html('<img src={{ asset("bundles/catalogcommon/images/loading.gif") }} height="15px" />');
                                        $.ajax({
                                            type:   'POST',
                                            async:  false,
                                            url:    "{% block ajaxUrl %}{{ path('catalog_common_articuls') }}{% endblock ajaxUrl %}",
                                            data:   { {% block ajaxData %}regionCode: '{{ oContainer.getActiveRegion.getCode }}', modificationCode: '{{ oContainer.getActiveModification.getCode }}', options: '{{ oContainer.getActiveSchema.getOptions|json_encode()|raw }}', subGroupCode: '{{ parameters.subGroupCode }}', pncCode: '{{ pnc.getCode }}'{% endblock ajaxData %} },
                                            success: function(data) {
                                                $("#articul_for_pnc{{ pnc.getCode }}").html(data);
                                            }
                                        });
                                        $("#pnc_{{ pnc.getCode }}").toggleClass("glyphicon-minus");
                                        $("#pnc_{{ pnc.getCode }}").toggleClass("small btn-default");
                                        {% endblock pncClick %}
                                    });
                                    $("#pnc_{{ pnc.getCode }}").on("mouseover", function(){
                                        $(this).css("cursor", "pointer");
                                        $(this).addClass("btn-info");
                                    });
                                    $("#pnc_{{ pnc.getCode }}").on("mouseout", function(){
                                        $(this).removeClass("btn-info");
                                    });
                                </script>
                            {% endblock pncScript %}
                            {% for coords in pnc.getOption(constant('Catalog\\CommonBundle\\Components\\Constants::COORDS')) %}
                                <area shape="rect" coords="
                                        {{ coords[constant('Catalog\\CommonBundle\\Components\\Constants::X1')] }},
                                        {{ coords[constant('Catalog\\CommonBundle\\Components\\Constants::Y1')] }},
                                        {{ coords[constant('Catalog\\CommonBundle\\Components\\Constants::X2')] }},
                                        {{ coords[constant('Catalog\\CommonBundle\\Components\\Constants::Y2')] }}
                                    " href="#" id="{{ pnc.getCode~coords[constant('Catalog\\CommonBundle\\Components\\Constants::X1')] }}" data-name="{% block dataName %}{{ pnc.getCode }}{% endblock dataName %}"/>
                                {% block pncAreaScript %}
                                    <script>
                                        $("area#{{ pnc.getCode~coords[constant('Catalog\\CommonBundle\\Components\\Constants::X1')] }}").on("click", function(){
                                            {{ block('pncClick') }}
                                        })
                                    </script>
                                {% endblock pncAreaScript %}
                            {% endfor %}
                        {% endblock pnc %}
                        {% block articulForPnc %}
                            <div class="hidden" id="articul_for_pnc{{ pnc.getCode }}"></div>
                        {% endblock articulForPnc %}
                    {% endfor %}
                {% endblock pncs %}
                {% endif %}
                {% if oContainer.getActiveSchema.getCommonArticuls %}
                <h4>Общие запчасти</h4>
                {% block commonArticuls %}
                    {% for commonArticul in oContainer.getActiveSchema.getCommonArticuls %}
                        {% block commonArticul %}
                            <div id="articul_{{ commonArticul.getCode }}">
                                <a href="{% block commonArticulPath %}{% endblock commonArticulPath %}" target="_blank">{{ commonArticul.getCode }}</a>
                            </div>
                            {% for coords in commonArticul.getOption(constant('Catalog\\CommonBundle\\Components\\Constants::COORDS')) %}
                                <area shape="rect" coords="
                                        {{ coords[constant('Catalog\\CommonBundle\\Components\\Constants::X1')] }},
                                        {{ coords[constant('Catalog\\CommonBundle\\Components\\Constants::Y1')] }},
                                        {{ coords[constant('Catalog\\CommonBundle\\Components\\Constants::X2')] }},
                                        {{ coords[constant('Catalog\\CommonBundle\\Components\\Constants::Y2')] }}
                                    " target="_blank" href="{{ block('commonArticulPath') }}" id="{{ commonArticul.getCode~coords[constant('Catalog\\CommonBundle\\Components\\Constants::X1')] }}" data-name="{% block dataNameCommonArticul %}{{ commonArticul.getCode }}{% endblock dataNameCommonArticul %}"/>
                            {% endfor %}
                        {% endblock commonArticul %}
                    {% endfor %}
                {% endblock commonArticuls %}
                {% endif %}
                {% if oContainer.getActiveSchema.getRefGroups %}
                {% block refGroupsHead %}<h4>Связанные группы</h4>{% endblock refGroupsHead %}
                {% block refGroups %}
                    {% for refGroup in oContainer.getActiveSchema.getRefGroups %}
                        {% block refGroup %}
                            <div>
                                <a href="{% block subGroupPath %}{% endblock subGroupPath %}">{{ refGroup.getCode }}</a>
                            </div>
                            {% for coords in refGroup.getOption(constant('Catalog\\CommonBundle\\Components\\Constants::COORDS')) %}
                                <area shape="rect" coords="
                                        {{ coords[constant('Catalog\\CommonBundle\\Components\\Constants::X1')] }},
                                        {{ coords[constant('Catalog\\CommonBundle\\Components\\Constants::Y1')] }},
                                        {{ coords[constant('Catalog\\CommonBundle\\Components\\Constants::X2')] }},
                                        {{ coords[constant('Catalog\\CommonBundle\\Components\\Constants::Y2')] }}
                                    " href="{{ block('subGroupPath') }}" id="{{ refGroup.getCode~coords[constant('Catalog\\CommonBundle\\Components\\Constants::X1')] }}" data-name="{% block dataNamerefGroup %}{{ refGroup.getCode }}{% endblock dataNamerefGroup %}"/>
                            {% endfor %}
                        {% endblock refGroup %}
                    {% endfor %}
                {% endblock refGroups %}
                {% endif %}
            </div>
            </map>
            <div class="col-lg-8">
                <div class="schema">
                    {% block image %}
                    {% endblock image %}
                </div>
            </div>
        </div>
    {% endblock schema %}
    {% block mapsterScript %}
        <script>
            $('img').mapster({
                stroke: true,
                strokeColor: '70daf1',
                strokeOpacity: 1,
                strokeWidth: 1,
                fill: true,
                fillColor: '70daf1',
                fillOpacity: 0.5,
                mapKey: 'data-name',
                render_highlight: {
                    fillOpacity: 0.5
                },
                render_select: {
                    fillOpacity: 0
                },

                onClick: function(e) {
                    e.e.preventDefault();
                    var target = $(this).attr('target');
                    if (target=='_blank') {
                        window.open($(this).attr('href'));
                    }
                    return false;
                },
                clickNavigate: true
            }).mapster('set', true, '{% block activeLabel %}{% endblock activeLabel %}');
        </script>
    {% endblock mapsterScript %}
{% endblock body %}